import React from 'react';
import { Radio, Typography } from 'antd';
import { Question } from '@/types/question';
import MarkdownEditor from '@/components/MDEditor';
import styles from './QuestionRenderer.module.css';

const { Text } = Typography;

interface CodeReadingSingleChoiceProps {
  question: Question;
  value?: string; // 传入的是字母选项（A, B, C, D）
  onChange?: (value: string) => void; // 返回字母选项
}

/**
 * 代码阅读题专用单选组件
 * 显示字母选项（A, B, C, D）而不是数字ID
 */
const CodeReadingSingleChoice: React.FC<CodeReadingSingleChoiceProps> = ({
  question,
  value,
  onChange,
}) => {
  return (
    <div className="code-reading-single-choice">
      <div className="question-content" style={{ marginBottom: '16px' }}>
        <MarkdownEditor 
          value={question.content} 
          preview="preview" 
          readOnly 
        />
      </div>
      
      <div className="options-container">
        <Radio.Group
          value={value}
          onChange={(e) => onChange?.(e.target.value)}
          className="options-list"
        >
          {question.choices?.map((choice, index) => {
            // 将索引转换为字母 (0->A, 1->B, 2->C, 3->D)
            const letter = String.fromCharCode(65 + index);
            
            return (
              <div 
                key={choice.id} 
                className={`option-item ${value === letter ? 'selected' : ''}`}
                style={{
                  marginBottom: '12px',
                  padding: '12px',
                  border: '1px solid #d9d9d9',
                  borderRadius: '6px',
                  cursor: 'pointer',
                  background: value === letter ? '#f6ffed' : '#fff',
                  borderColor: value === letter ? '#52c41a' : '#d9d9d9',
                  transition: 'all 0.2s ease',
                }}
                onClick={() => onChange?.(letter)}
              >
                <Radio value={letter} style={{ width: '100%' }}>
                  <span style={{ fontWeight: 500, marginRight: '8px' }}>
                    {letter}.
                  </span>
                  <span>
                    {choice.content}
                  </span>
                </Radio>
              </div>
            );
          })}
        </Radio.Group>
      </div>
    </div>
  );
};

export default CodeReadingSingleChoice; 